{% extends 'account/base.html' %}
{% load staticfiles %}
{% block content %}

        <!-- Page Heading -->
        <div class="row">
            <div class="col-lg-12">
                <h1 class="page-header">
                    Mail
                    <small>View private messages sent to you</small>
                </h1>
                <ol class="breadcrumb">
                    <li>
                        <i class="fa fa-university"></i>  <a href="/courses">Registrar</a>
                    </li>
                    <li>
                        <i class="fa fa-compass"></i> {{ user.first_name }} {{ user.last_name }}
                    </li>
                    <li class="active">
                        <i class="fa fa-envelope"></i> Inbox
                    </li>

                </ol>
            </div>
        </div>
        <!-- /.row -->


        <div class="row">
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Send Message</h3>
                    </div>
                    <div class="panel-body">
                        <form role="form">
                            <div class="form-group">
                                <label>Email</label>
                                <input class="form-control"
                                          id="email"
                                        name="email"
                                 placeholder="Enter Email of Account in Academics Today"
                                        type="input">
                            </div>
                            <div class="form-group">
                                <label>Title</label>
                                <input class="form-control"
                                          id="title"
                                        name="title"
                                 placeholder="Enter Title"
                                        type="input">
                            </div>
                            <div class="form-group">
                                <label>Message</label>
                                <textarea id="message" name="message" class="form-control" rows="6" placeholder="Enter Message"></textarea>
                            </div>
                            <button onclick="ajax_send_message();"
                                        id="send_message_btn"
                                        name="send_message_btn"
                                        type="button"
                                        class="btn btn-lg btn-primary">Send Message</button>
                        </form>
                        <br/>
                        <!-- Error Message Box -->
                        <div id="error_box" name="error_box" class="alert alert-danger alert-dismissable" hidden="true">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
                            ERROR: This is to be filled in by the "print_error" function. If you see this message that means there's an error with your javascript somewhere.
                        </div><!-- /.Error Message Box -->
                    </div>
                </div>
            </div><!-- /.col-sm-12 -->
        </div><!-- /.row -->


        <div class="row">
            <div class="col-sm-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">Read Message(s)</h3>
                    </div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-hover table-striped">
                                <thead>
                                    <tr>
                                        <th>Email</th>
                                        <th>Title</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for message in messages %}
                                    <tr>
                                        <td>{{ message.from_address }}</td>
                                        <td>{{ message.title }}</td>
                                        <td>
                                            <button onclick="ajax_view_message({{ message.id }});"
                                                         id="view_{{ message.id }}_btn"
                                                       name="view_{{ message.id }}_btn"
                                                       type="button"
                                                      class="btn btn-xs btn-primary">View</button>
                                            <button onclick="ajax_delete_message({{ message.id }});"
                                                         id="del_{{ message.id }}_btn"
                                                       name="del_{{ message.id }}_btn"
                                                       type="button"
                                                      class="btn btn-xs btn-danger">Delete</button>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div><!-- /.col-sm-12 -->
        </div><!-- /.row -->

<!-- Modal -->
<div id="ajax_modal"
   name="ajax_modal"></div>
<!-- end modal -->
<script>
    function ajax_send_message()
    {
        $('#send_message_btn').prop("disabled", true);
        $.ajax( 'send_private_message', {
            data: {
                'csrfmiddlewaretoken': '{{ csrf_token }}',
                'email': $('#email').val(),
                'title': $('#title').val(),
                'message': $('#message').val()
            },
            type: 'post',
            success: function(result) {
                // success code execution here
               if (result.status == 'success')
               {
                    window.location = ""
               }
               else
               {
                    print_error(result.message);
               }
               
            },
            error: function(xhr,status,error) {
                // error code here
            },
            complete: function(xhr,status) {
                // completion code here
                $('#send_message_btn').prop("disabled", false);
            }
        });
    }
    
    function ajax_view_message(message_id)
    {
        $('#view_'+message_id+'_btn').prop("disabled", true);
        $.ajax( 'view_private_message', {
            data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
               'message_id': message_id
            },
            type: 'post',
            success: function(result) {
               // success code execution here
               $('#ajax_modal').html(result);
               $('#private_message_modal').modal();
            },
            error: function(xhr,status,error) {
               // error code here
            },
            complete: function(xhr,status) {
               // completion code here
               $('#view_'+message_id+'_btn').prop("disabled", false);
            }
        });
    }

    function ajax_delete_message(message_id)
    {
        $('#del'+message_id+'_btn').prop("disabled", true);
        $.ajax( 'delete_private_message', {
            data: {
               'csrfmiddlewaretoken': '{{ csrf_token }}',
               'message_id': message_id
            },
            type: 'post',
            success: function(result) {
               // success code execution here
               window.location = ""
            },
            error: function(xhr,status,error) {
               // error code here
            },
            complete: function(xhr,status) {
               // completion code here
               $('#del'+message_id+'_btn').prop("disabled", false);
            }
        });
    }

/**
 * Prints a error box with the contents of the errors received from the server.
 */
function print_error(message)
{
    $('#error_box').prop("hidden", false); // Display error box.
    
    // Iterate through the JSON array of arrays and generate an error string.
    var message = "<b>Error(s):</b><hr/>" + "<p>" + message + "</p>";
    
    // Replace the error string with the contents of the error box.
    $('#error_box').html(message);
}

</script>

{% endblock content %}
